<template>
  <view class="container">
    <FilterNavbar :searchList="searchList" v-model:queryParam="queryParam" @confirm="onFilterNavbarConfirm">
      <template #center>
        <view class="navbar-title"> 库存同步记录 </view>
      </template>
    </FilterNavbar>
    <view class="manager-search">
      <ve-search-bar
        :showBorder="true"
        placeholder="请输入车牌号/业务单号/临时占用ID"
        v-model="queryParam.keyword"
        @search="searchBarSearch"
      />
    </view>
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <block v-for="item in (dataSource as any)" :key="item.id">
          <ve-card
            :customContentStyle="{
              padding: '0 20rpx 12rpx',
            }"
            :title="`车牌号： ${item.licenseNo}`"
            :sub-title="item.statusName"
            :type="getStatus(item.status)"
            @click="routeDetail(item.id)"
          >
            <ve-cell label="业务单信息" layout="vertical">
              <view class="info_block">
                <view>{{ item.useTypeName }}：{{ item.refCode || '-' }}</view>
                <view class="info_item" v-if="item.refCodeChannel">{{ item.refChannelTypeName || '-' }}：{{ item.refCodeChannel }}</view>
                <view class="info_item" v-if="item.refOperateUserName">{{ item.refOperateUserName || '-' }}</view>
                <view class="info_item" v-if="item.refOperateTime">{{ item.refOperateTime || '-' }}</view>
              </view>
            </ve-cell>
            <ve-cell label="库存周期">{{ item.fromTime || '-' }}至{{ item.toTime || '-' }}</ve-cell>
            <!-- 同步模块列表 -->
            <view class="statusGroup">
              <view class="item" v-for="(syncItem, index) in item.sourceList" :key="index">
                <view class="label">
                  <p>{{ syncItem.sourceName }}</p>
                  <p class="label-code">&nbsp; - &nbsp;{{ syncItem.subject }}</p>
                </view>
                <p v-if="syncItem" :class="['statusName__' + syncItem.syncStatus]">
                  {{ syncItem.syncStatus !== null ? syncItem.syncStatusName : '-' }}
                </p>
              </view>
            </view>
          </ve-card>
        </block>
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import FilterNavbar from '@/components/FilterNavbar'

  import { onLoad } from '@dcloudio/uni-app'
  import { computed, onMounted, ref } from 'vue'
  import { usePageDict, useSysDict } from '@/hooks/useDict'
  import useList from '@/hooks/useList'
  import dayjs from 'dayjs'

  const sysDict = useSysDict(['short_order_channel_type'])
  const dict = usePageDict('syncRecordDict')

  const queryParam = ref<any>({})

  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/channelSyncStore/pageList',
    queryParam,
  )
  const getStatus = (status: number) => {
    switch (status) {
      case 0:
        return 'yellow'
      case 1:
        return 'blue'
    }
  }
  const routeDetail = (id: any) => {
    uni.navigateTo({
      url: '/pages/order/inventory-occupy-record/detail?id=' + id,
    })
  }

  const searchList = computed(() => {
    return [
      {
        prop: 'useType',
        label: '服务类型',
        type: 'picker',
        attrs: {
          options: dict.CarUseTypeEnum,
        },
      },
      {
        prop: 'syncStatus',
        label: '同步状态',
        type: 'picker',
        attrs: {
          options: dict.syncStatusEnum,
        },
      },
      {
        prop: 'status',
        label: '同步类型',
        type: 'picker',
        attrs: {
          options: dict.statusEnum,
        },
      },
      {
        prop: 'refOrderSource',
        label: '订单来源',
        type: 'picker',
        attrs: {
          options: dict.orderSourceEnum,
        },
      },
      {
        prop: 'refChannelType',
        label: '订单渠道',
        type: 'picker',
        attrs: {
          options: sysDict.short_order_channel_type,
        },
      },
      {
        label: '占用目标渠道',
        prop: 'sourceId',
        type: 'picker',
        attrs: {
          options: dict.thirdpartySourceEnum,
        },
      },
      {
        label: '目标运营主体',
        prop: 'accountId',
        type: 'remote-select',
        attrs: {
          type: 'target_channel_account',
          label: queryParam.value.account,
          params: {
            id: queryParam.value.accountId,
          },
        },
      },
      {
        label: '操作人',
        prop: 'refOperateUserId',
        type: 'remote-select',
        attrs: {
          type: 'staff_operator',
        },
      },
      {
        prop: ['fromTimeStart', 'fromTimeEnd'],
        label: '库存开始时间',
        type: 'daterange-picker',
      },
      {
        prop: ['toTimeStart', 'toTimeEnd'],
        label: '库存结束时间',
        type: 'daterange-picker',
      },
      {
        prop: ['endTimeStart', 'endTimeEnd'],
        label: '任务结束时间',
        type: 'daterange-picker',
      },
    ]
  })

  const searchBarSearch = (val: any) => {
    queryParam.value = {
      ...queryParam.value,
      keyword: val,
    }
    resetRefresh()
  }

  const onFilterNavbarConfirm = (params: any) => {
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    resetRefresh()
  }

  onLoad((options: any) => {
    if (options.sourceId && options.accountId && options.account && options.syncStatus) {
      queryParam.value = {
        ...queryParam.value,
        sourceId: options.sourceId,
        accountId: options.accountId,
        account: options.account,
        syncStatus: options.syncStatus,
        // endTimeStart: dayjs(options.endTime).format('YYYY-MM-DD HH:mm:ss'),
        // endTimeEnd: dayjs(options.endTime).format('YYYY-MM-DD HH:mm:ss'),
      }
      resetRefresh()
    }
  })

  onMounted(() => {
    loadData()
  })
</script>

<style lang="scss" scoped>
  .container {
    height: 100vh;
  }
  .record-list {
    padding: 24rpx 24rpx;
  }
  .channelContent {
    width: 80rpx;
    height: 40rpx;
    border-radius: 4rpx;
    opacity: 1;
    color: #ffffff;
    font-size: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff9c5f;
  }
  .channelTypeName__1 {
    background: #00b2ff;
  }
  .channelTypeName__-1 {
    background: #ffe180;
  }
  .channelTypeName__2 {
    background: #f68b8b;
  }
  .channelTypeName__3 {
    background: #52c2e4;
  }
  .statusName__0 {
    color: #f53f3f;
  }
  .statusName__1 {
    color: #00b42a;
  }
  .statusName__2 {
    color: #e59b1c;
  }
  .channelCode {
    display: flex;
    justify-content: space-between;
    .ve-cell {
      margin: 0 !important;
    }
  }

  .info_block {
    background: #f7f8fa;
    padding: 24rpx;
    font-size: 30rpx;
    color: #191c27;
    line-height: 30rpx;
    .info_item {
      margin-top: 16rpx;
    }
  }

  .statusGroup {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 100%;
      height: 92rpx;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      background: #f7f8fa;

      .label {
        display: flex;
        .label-code {
          overflow: hidden;
          width: 340rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
